<template>
    <div class="contener">
        <div class="tree-page">
            <!-- 页面 -->
            <div class="page">
                <!-- 搜索 -->
                <transition
                    @before-enter="_beforeEnter"
                    @enter="_enter"
                    @after-enter="_afterEnter"
                    @before-leave="_beforeLeave"
                    @leave="_leave"
                    @after-leave="_afterLeave"
                >
                    <div
                        class="search-contener"
                        ref="searchContener"
                        v-show="searchFormConfig.searchContenerShow"
                    >
                        <base-form
                            :formItems="searchFormConfig.formItems"
                            :formData="searchFormConfig.formSubmit"
                            ref="searchForm"
                            @onButtonClick="searchBarButtonClick"
                        />
                    </div>
                </transition>
                <!-- 表格 -->
                <div class="datas-contener">
                    <!-- 表格操作项 -->
                    <div class="option-contener">
                        <data-options
                            @buttonClick="handelOptionClick"
                            :leftConfig="dataOptionConfig.leftConfig"
                        />
                    </div>
                    <!-- 表格展示项 -->
                    <div class="table-contener">
                        <base-table
                            ref="baseTable"
                            :tableData="baseTableConfig.tableData"
                            :tableHeader="baseTableConfig.tableHeader"
                            :tableConfig="baseTableConfig.tableConfig"
                            @handleSelection="tableDataSelected"
                        >
                            <template slot-scope="{ scope }">
                                <span v-if="scope.type === 'index'">
                                    {{ scope.$index + 1 }}
                                </span>
                                <span v-if="scope.type === 'module'">
                                    {{
                                        scope.row.moduleId
                                            | getAttrName(
                                                moduleList,
                                                'id',
                                                'name'
                                            )
                                    }}
                                </span>
                                <span v-if="scope.type === 'source'">
                                    {{
                                        scope.row.datasourceId
                                            | getAttrName(
                                                dataSourceList,
                                                'value',
                                                'label'
                                            )
                                    }}
                                </span>
                                <el-tag
                                    v-if="scope.type === 'tableTypeTag'"
                                    type="primary"
                                    size="small"
                                    >{{
                                        scope.row.tableType === '0'
                                            ? '普通表'
                                            : '单根树表'
                                    }}</el-tag
                                >

                                <el-tag
                                    v-if="scope.type === 'statusTag'"
                                    :type="
                                        scope.row.status === '0'
                                            ? 'info'
                                            : 'success'
                                    "
                                    size="small"
                                    >{{
                                        scope.row.status === '0'
                                            ? '创建中'
                                            : '已应用'
                                    }}</el-tag
                                >
                                <div v-if="scope.type === 'handle'">
                                    <el-button
                                        type="text"
                                        @click.stop="columnTableData(scope.row)"
                                        v-hasPermi="[
                                            '/tool/dmd/dataModel/createTable'
                                        ]"
                                        >表字段</el-button
                                    >
                                    <el-button
                                        type="text"
                                        @click.stop="indexTableData(scope.row)"
                                        v-hasPermi="[
                                            '/tool/dmd/dataModel/createIndex'
                                        ]"
                                        >表索引</el-button
                                    >
                                    <el-button
                                        type="text"
                                        @click.stop="deleteTableData(scope.row)"
                                        v-hasPermi="[
                                            '/tool/dmd/dataModel/deleteTable'
                                        ]"
                                        >删除</el-button
                                    >
                                    <el-button
                                        type="text"
                                        @click.stop="syncTableData(scope.row)"
                                        v-hasPermi="[
                                            '/tool/dmd/dataModel/syncDataModel'
                                        ]"
                                        >应用</el-button
                                    >
                                </div>
                            </template>
                        </base-table>
                    </div>
                    <!-- 分页 -->
                    <div class="paging-contener">
                        <pagin-ation
                            :size="paginationConfig.size"
                            :total="paginationConfig.total"
                            :type="paginationConfig.type"
                            :currentPage="paginationConfig.currentPage"
                            @PageNumber="pageNumberChange"
                            @PageSize="pageSizeChange"
                        />
                    </div>
                </div>
            </div>
        </div>
        <!-- 弹框 -->
        <el-dialog
            :title="dialogConfig.title"
            :visible.sync="dialogConfig.show"
            :width="dialogConfig.width"
            v-dialogDrag
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            append-to-body
        >
            <!-- 筛选表格列 -->
            <div
                class="dialog-content"
                v-if="dialogConfig.key === 'tableColumn'"
            >
                <base-transfer
                    :transferConfig="tableColumnTransferConfig"
                    ref="baseTransfer"
                />
            </div>
            <!-- 新增表 -->
            <div v-if="dialogConfig.key === 'addTableData'">
                <base-form
                    :formItems="addFormConfig.formItems"
                    :formData="addFormConfig.formSubmit"
                    :formConfig="addFormConfig.formConfig"
                    :formRules="addFormConfig.formRule"
                    ref="addForm"
                    @onButtonClick="addFormButtonClick"
                    @onSelectChange="handerOnSelectChange"
                />
            </div>
            <!-- 表字段 -->
            <div
                class="config—model-dialog"
                v-if="dialogConfig.key === 'configColumnData'"
            >
                <base-table
                    ref="configColumnDataTable"
                    :tableData="configColumnDataTableConfig.tableData"
                    :tableHeader="configColumnDataTableConfig.tableHeader"
                    :tableConfig="configColumnDataTableConfig.tableConfig"
                >
                    <template slot-scope="{ scope }">
                        <div v-if="scope.type === 'handle'">
                            <el-button
                                type="primary"
                                icon="el-icon-plus"
                                size="mini"
                                @click.stop="
                                    addRowData(scope.$index, scope.row)
                                "
                            />
                            <el-button
                                type="danger"
                                icon="el-icon-minus"
                                size="mini"
                                @click.stop="
                                    deleteRowData(scope.$index, scope.row)
                                "
                            />
                        </div>
                        <el-checkbox
                            v-if="scope.type === 'isKeyCheckBox'"
                            :size="scope.size | setSize(scope.size)"
                            :disabled="!setDisabled(scope.row)"
                            v-model="scope.row.isKey"
                        />
                        <el-checkbox
                            v-if="scope.type === 'isNullCheckBox'"
                            :size="scope.size | setSize(scope.size)"
                            :disabled="!setDisabled(scope.row)"
                            v-model="scope.row.isNull"
                        />
                        <el-input
                            v-if="scope.type === 'columnNameText'"
                            placeholder="请输入列名称"
                            :size="scope.size | setSize(scope.size)"
                            :disabled="!setDisabled(scope.row)"
                            v-model="scope.row.columnName"
                            @blur="columnNameInputBlur(scope.row)"
                        />
                        <el-input
                            v-if="scope.type === 'remarksText'"
                            placeholder="请输入列描述"
                            :size="scope.size | setSize(scope.size)"
                            :disabled="!setDisabled(scope.row)"
                            v-model="scope.row.remarks"
                        />
                        <el-input
                            v-if="scope.type === 'columnSizeText'"
                            placeholder="请输入长度"
                            type="number"
                            min="0"
                            :size="scope.size | setSize(scope.size)"
                            :disabled="!setDisabled(scope.row)"
                            v-model="scope.row.columnSize"
                        />
                        <el-input
                            v-if="scope.type === 'decimalDigitsText'"
                            placeholder="请输入精度"
                            type="number"
                            min="0"
                            max="6"
                            :size="scope.size | setSize(scope.size)"
                            :disabled="!setDisabled(scope.row)"
                            v-model="scope.row.decimalDigits"
                        />
                        <el-input
                            v-if="scope.type === 'columnDefaultText'"
                            placeholder="请输入默认值"
                            :size="scope.size | setSize(scope.size)"
                            :disabled="!setDisabled(scope.row)"
                            v-model="scope.row.columnDefault"
                        />

                        <el-input
                            v-if="scope.type === 'sortText'"
                            :size="scope.size | setSize(scope.size)"
                            :disabled="true"
                            v-model="scope.$index"
                        />

                        <el-select
                            v-if="scope.type === 'columnTypeSelect'"
                            v-model="scope.row.columnType"
                            placeholder="请选择"
                            :size="scope.size | setSize(scope.size)"
                            :disabled="!setDisabled(scope.row)"
                            @change="columnTypeSelectChange(scope.row)"
                        >
                            <el-option
                                v-for="item in columnTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </template>
                </base-table>
            </div>

            <!-- 表索引 -->
            <div
                class="config—model-dialog"
                v-if="dialogConfig.key === 'configIndexData'"
            >
                <base-table
                    ref="configIndexDataTable"
                    :tableData="configIndexDataTableConfig.tableData"
                    :tableHeader="configIndexDataTableConfig.tableHeader"
                    :tableConfig="configIndexDataTableConfig.tableConfig"
                >
                    <template slot-scope="{ scope }">
                        <div v-if="scope.type === 'handle'">
                            <el-button
                                type="primary"
                                icon="el-icon-plus"
                                size="mini"
                                @click.stop="
                                    addIndexData(scope.$index, scope.row)
                                "
                            />
                            <el-button
                                type="danger"
                                icon="el-icon-minus"
                                size="mini"
                                @click.stop="
                                    deleteIndexData(scope.$index, scope.row)
                                "
                            />
                        </div>

                        <el-input
                            v-if="scope.type === 'indexNameText'"
                            placeholder="请输入索引名称"
                            :size="scope.size | setSize(scope.size)"
                            :disabled="true"
                            v-model="scope.row.indexName"
                        />

                        <el-select
                            v-if="scope.type === 'indexTypeSelect'"
                            v-model="scope.row.indexType"
                            placeholder="请选择"
                            :size="scope.size | setSize(scope.size)"
                            :disabled="!setDisabled(scope.row)"
                            @change="
                                indexTypeSelectChange(scope.$index, scope.row)
                            "
                        >
                            <el-option
                                v-for="item in indexTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                        <el-select
                            v-if="scope.type === 'indexColumnsSelect'"
                            v-model="scope.row.indexCols"
                            placeholder="请选择"
                            :size="scope.size | setSize(scope.size)"
                            :multiple="true"
                            :disabled="!setDisabled(scope.row)"
                            @change="indexColumnsSelectChange(scope.row)"
                        >
                            <el-option
                                v-for="item in curRowData.columns"
                                :key="item.columnName"
                                :label="item.columnName"
                                :value="item.columnName"
                            />
                        </el-select>
                    </template>
                </base-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="handelCloseDialog"
                    >取 消</el-button
                >
                <el-button
                    size="small"
                    type="primary"
                    @click="handelCofimeDialog"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>
<script>
import Vue from 'vue'
import BaseForm from '@/components/baseForm/index'
import DataOptions from '@/components/dataOptions/index'
import BaseTable from '@/components/baseTable/index'
import PaginAtion from '@/components/pagination/index'
import BaseTransfer from '@/components/baseTransfer/index'
import globalMixin from '@/mixins/global'
import { getDataSourceSelectData } from '@/http/apis/system/dataSource/index'
import { moduleSelect } from '@/http/apis/system/module/index'
import {
    dataModelList,
    createTable,
    createColumn,
    syncDataModel,
    deleteTable,
    createIndex
} from '@/http/apis/tool/dmd/dataModel'
import { getDictDatas } from '@/plugins/dict'
import {
    assemblyDataByTableColumn,
    setFormItemProp,
    setSelectFormart
} from '@/utils/tool'
export default {
    components: {
        BaseForm,
        DataOptions,
        BaseTable,
        PaginAtion,
        BaseTransfer
    },
    mixins: [globalMixin],
    dicts: ['sys_normal_disable', 'sys_user_sex'],
    data() {
        return {
            curRowData: {},
            tableTypeList: [
                { value: '0', name: '普通表' },
                { value: '1', name: '单根树表' }
            ],
            indexTypeList: [
                { value: 'index', label: 'INDEX' },
                { value: 'unique', label: 'UNIQUE' }
            ],
            //数据类型列表
            columnTypeList: [
                { value: 'int', label: 'int' },
                { value: 'varchar', label: 'varchar' },
                { value: 'text', label: 'text' },
                { value: 'double', label: 'double' },
                { value: 'date', label: 'date' },
                { value: 'datetime', label: 'datetime' }
            ],
            //数据类型列表
            defaultColumnList: [
                {
                    columnName: 'create_user',
                    remarks: '创建人',
                    columnType: 'varchar',
                    columnSize: 100,
                    decimalDigits: 0,
                    isKey: false,
                    isNull: true
                },
                {
                    columnName: 'create_time',
                    remarks: '创建时间',
                    columnType: 'datetime',
                    columnSize: 0,
                    decimalDigits: 0,
                    isKey: false,
                    isNull: true
                },
                {
                    columnName: 'update_user',
                    remarks: '更新人',
                    columnType: 'varchar',
                    columnSize: 100,
                    decimalDigits: 0,
                    isKey: false,
                    isNull: true
                },
                {
                    columnName: 'update_time',
                    remarks: '更新时间',
                    columnType: 'datetime',
                    columnSize: 0,
                    decimalDigits: 0,
                    isKey: false,
                    isNull: true
                }
            ],
            //数据源数组
            dataSourceList: [],
            //模块列表数据
            moduleList: [],

            // 通用树组件配置
            baseTreeConfig: {
                // tree的数据
                data: [],
                // tree的加载状态
                loading: false,
                // tree选中的树
                currentNodeKey: '',
                // 过滤显示
                filterShow: true
            },
            // 搜索表单配置
            searchFormConfig: {
                formItems: [
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入表名称',
                            label: '表名称',
                            prop: 'tableName',
                            width: 'w-2'
                        },
                        {
                            ltype: 'input',
                            placeholder: '请输入模型名称',
                            label: '表描述',
                            prop: 'functionName',
                            width: 'w-2'
                        },
                        {
                            ltype: 'select',
                            placeholder: '请选择数据源',
                            label: '数据源',
                            prop: 'datasourceId',
                            width: 'w-2',
                            options: getDictDatas('sys_normal_disable')
                        },
                        {
                            ltype: 'button',
                            type: 'primary',
                            text: '搜索',
                            prop: 'searchDatas',
                            icon: 'el-icon-search',
                            width: 'w-auto',
                            loading: false
                        },
                        {
                            ltype: 'button',
                            type: 'default',
                            text: '重置',
                            prop: 'resetSearchForm',
                            icon: 'el-icon-refresh-right',
                            width: 'w-auto'
                        }
                    ]
                ],
                formSubmit: {
                    functionName: '',
                    tableName: '',
                    datasourceId: ''
                },
                formConfig: {
                    labelPosition: 'right', // label对齐方式
                    labelWidth: 'auto'
                },
                // 搜索控件是否显示
                searchContenerShow: true
            },
            // 数据操作项配置
            dataOptionConfig: {
                // 左侧按钮配置
                leftConfig: [
                    {
                        prop: 'addTableData',
                        label: '新建',
                        icon: 'el-icon-plus',
                        type: 'primary',
                        disabled: false,
                        hasPermi: ['/tool/dmd/businessModel/create']
                    }
                ]
            },
            // 表格配置
            baseTableConfig: {
                // 表格数据
                tableData: [],
                // 表格头数据
                tableHeader: [
                    {
                        type: 'selection',
                        width: 50,
                        fixed: 'left',
                        label: '选择',
                        visible: true
                    },
                    {
                        prop: 'tableName',
                        label: '表名称',
                        visible: true
                    },
                    {
                        prop: 'tableComment',
                        label: '表描述',
                        visible: true
                    },
                    {
                        type: 'module',
                        label: '所属业务模块',
                        width: 400,
                        visible: true
                    },
                    {
                        type: 'source',
                        label: '数据源',
                        visible: true
                    },
                    {
                        type: 'tableTypeTag',
                        label: '表类型',
                        visible: true
                    },
                    {
                        label: '状态',
                        align: 'center',
                        type: 'statusTag',
                        visible: true
                    },
                    {
                        prop: 'createTime',
                        label: '创建时间',
                        showOverflowTooltip: true,
                        visible: true
                    },
                    {
                        label: '操作',
                        type: 'handle',
                        fixed: 'right',
                        width: 200,
                        visible: true
                    }
                ],
                // 表格配置
                tableConfig: {
                    loading: false
                },
                // 选中的表格数据
                tableCheckedDatas: []
            },
            // 分页配置
            paginationConfig: {
                type: 'md',
                size: 10,
                currentPage: 1,
                total: 100
            },
            // 弹框配置
            dialogConfig: {
                // 弹框标题
                title: '新增',
                // 是否显示
                show: false,
                // 宽度
                width: 'auto',
                // 弹框标识(用来区分弹框内容)
                key: ''
            },
            // 查询表格数据的参数
            queryTableParams: {
                pageNo: 0,
                pageSize: 10,
                entity: {}
            },
            // 表格列筛选配置
            tableColumnTransferConfig: {
                // 穿梭框的数据
                data: [],
                // 穿梭框的标题
                titles: ['显示', '隐藏'],
                // 隐藏的列
                modelList: []
            },
            // 新增表单配置
            addFormConfig: {
                // 表单项
                formItems: [
                    [
                        {
                            ltype: 'select',
                            placeholder: '请选择数据源',
                            label: '数据源',
                            prop: 'datasourceId',
                            multiple: false,
                            width: 'w-1',
                            options: []
                        }
                    ],
                    [
                        {
                            ltype: 'radio',
                            label: '表类型',
                            prop: 'tableType',
                            width: 'w-1',
                            options: []
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入表名称',
                            label: '表名称',
                            prop: 'tableName',
                            width: 'w-1'
                        }
                    ],
                    [
                        {
                            ltype: 'input',
                            placeholder: '请输入表描述',
                            label: '表描述',
                            prop: 'tableComment',
                            width: 'w-1'
                        }
                    ],
                    [
                        {
                            ltype: 'select',
                            placeholder: '请选择模块',
                            label: '所属模块',
                            prop: 'moduleId',
                            width: 'w-1',
                            multiple: false,
                            options: []
                        }
                    ]
                ],
                // 提交项
                formSubmit: {
                    tableName: '',
                    tableComment: '',
                    datasourceId: '',
                    datasourceType: '',
                    moduleId: '',
                    tableType: '0'
                },
                // 配置项
                formConfig: {
                    labelPosition: 'right', // label对齐方式
                    labelWidth: '80px'
                },
                // 验证项
                formRule: {
                    tableName: [
                        {
                            required: true,
                            message: '请输入表名称',
                            trigger: 'blur'
                        }
                    ],
                    tableComment: [
                        {
                            required: true,
                            message: '请输入表描述',
                            trigger: 'blur'
                        }
                    ],
                    datasourceId: [
                        {
                            required: true,
                            message: '请选择数据源',
                            trigger: 'blur'
                        }
                    ],
                    moduleId: [
                        {
                            required: true,
                            message: '请选择所属模块',
                            trigger: 'blur'
                        }
                    ]
                }
            },
            //表字段配置表格
            configColumnDataTableConfig: {
                // 表格数据
                tableData: [],
                // 表格头数据
                tableHeader: [
                    {
                        label: '操作',
                        type: 'handle',
                        fixed: 'left',
                        width: 200,
                        visible: true
                    },
                    {
                        type: 'columnNameText',
                        prop: 'columnName',
                        label: '列名称',
                        size: 'medium',
                        visible: true
                    },
                    {
                        type: 'remarksText',
                        prop: 'remarks',
                        label: '列描述',
                        size: 'medium',
                        visible: true
                    },
                    {
                        type: 'columnTypeSelect',
                        prop: 'columnType',
                        label: '数据类型',
                        size: 'medium',
                        visible: true
                    },
                    {
                        type: 'columnSizeText',
                        prop: 'columnSize',
                        label: '长度',
                        size: 'medium',
                        width: 100,
                        visible: true
                    },
                    {
                        type: 'decimalDigitsText',
                        prop: 'decimalDigits',
                        label: '小数点 ',
                        size: 'medium',
                        width: 100,
                        visible: true
                    },
                    {
                        type: 'isKeyCheckBox',
                        prop: 'isKey',
                        label: '主键',
                        size: 'medium',
                        width: 60,
                        visible: true
                    },
                    {
                        type: 'isNullCheckBox',
                        prop: 'isNull',
                        label: '非空',
                        width: 60,
                        size: 'medium',
                        visible: true
                    },
                    {
                        type: 'sortText',
                        prop: 'sort',
                        label: '排序',
                        width: 60,
                        size: 'medium',
                        visible: true
                    },
                    {
                        type: 'columnDefaultText',
                        prop: 'columnDefault',
                        label: '默认值 ',
                        size: 'medium',
                        visible: true
                    },
                    {
                        prop: 'operFalg',
                        label: '操作类型 ',
                        size: 'medium',
                        visible: false
                    }
                ],
                // 表格配置
                tableConfig: {
                    loading: false
                }
            },
            //表字段配置表格
            configIndexDataTableConfig: {
                // 表格数据
                tableData: [],
                // 表格头数据
                tableHeader: [
                    {
                        label: '操作',
                        type: 'handle',
                        fixed: 'left',
                        width: 200,
                        visible: true
                    },
                    {
                        type: 'indexNameText',
                        prop: 'indexName',
                        label: '索引名称',
                        size: 'medium',
                        visible: true
                    },
                    {
                        type: 'indexTypeSelect',
                        prop: 'indexType',
                        label: '索引类型',
                        size: 'medium',
                        visible: true
                    },
                    {
                        type: 'indexColumnsSelect',
                        prop: 'indexColumns',
                        label: '关联字段',
                        size: 'medium',
                        visible: true
                    },
                    {
                        prop: 'operFalg',
                        label: '操作类型 ',
                        size: 'medium',
                        visible: false
                    }
                ],
                // 表格配置
                tableConfig: {
                    loading: false
                }
            }
        }
    },
    created() {
        this.initPage()
    },
    methods: {
        /**
         * 页面开始
         */
        async initPage() {
            // 查询数据源列表
            await this.queryDataSourceList()
            //查询所有模块
            await this.queryModuleList()
            // 设置表单的配置项
            this.setFormsItems()
            // 查询用户列表
            this.queryTableData(this.queryTableParams)
        },
        /**
         * 查询数据源列表
         */
        async queryDataSourceList() {
            try {
                let res = await getDataSourceSelectData()
                this.dataSourceList = res.data
            } catch (error) {
                this.dataSourceList = []
            }
        },

        /**
         * 查询模块列表
         */
        async queryModuleList() {
            try {
                let res = await moduleSelect()
                this.moduleList = res.data
            } catch (error) {
                this.moduleList = []
            }
        },

        /**
         * 中间表格相关
         */

        /**
         * 查询表格数据
         */
        async queryTableData(params) {
            this.baseTableConfig.tableConfig.loading = true
            try {
                let res = await dataModelList(params)
                if (res.data) {
                    this.baseTableConfig.tableData = res.data.list
                    this.paginationConfig.total = res.data.totalCount
                } else {
                    this.baseTableConfig.tableData = []
                    this.paginationConfig.total = 0
                }
                this.baseTableConfig.tableConfig.loading = false
            } catch (error) {
                this.baseTableConfig.tableConfig.loading = false
            }
        },
        /**
         * 表格数据被选中
         */
        tableDataSelected(rows) {
            this.baseTableConfig.tableCheckedDatas = rows
        },
        /**
         * 初始化查询参数
         */
        initQueryParmas() {
            this.queryTableParams = {
                pageNo: 0,
                pageSize: 10,
                entity: {
                    groupId: this.baseTreeConfig.currentNodeKey
                }
            }
            this.paginationConfig.size = 10
            this.paginationConfig.currentPage = 1
            this.baseTableConfig.tableData = []
        },
        /**
         * 页码变化
         */
        pageNumberChange(e) {
            this.queryTableParams.pageNo = e
            this.paginationConfig.currentPage = e
            this.queryTableData(this.queryTableParams)
        },
        /**
         * 页大小变化
         */
        pageSizeChange(e) {
            // 页大小变化时，将当前页码设置为0
            this.queryTableParams.pageNo = 0
            // 将当前表格数据设置为空
            this.baseTableConfig.tableData = []
            this.queryTableParams.pageSize = e
            this.queryTableData(this.queryTableParams)
        },

        /**
         * 搜索栏相关
         */
        /**
         * 搜索栏按钮点击
         * @param {Object} params
         */
        searchBarButtonClick(params) {
            // 清空查询参数
            this.initQueryParmas()
            try {
                this[params.prop]()
            } catch (error) {
                throw new Error(error)
            }
        },
        /**
         * 重置搜索表单
         */
        resetSearchForm() {
            // 查询参数初始化
            this.initQueryParmas()
            // 重置搜索表单
            this.$refs.searchForm.resetForm()
            // 查询数据
            this.refreshTableData()
        },

        /**
         * 搜索数据
         */
        searchDatas() {
            this.$refs.searchForm.submitForm(() => {
                // 清空查询参数
                this.initQueryParmas()
                // 组装查询条件
                this.queryTableParams.entity = {
                    ...this.searchFormConfig.formSubmit
                }
                // 查询数据
                this.queryTableData(this.queryTableParams)
            })
        },

        /**
         * 操作栏相关
         */
        /**
         * 操作项点击
         * @param {*} params
         */
        handelOptionClick(params) {
            this[params] ? this[params]() : null
        },
        /**
         * 切换搜索栏的显示状态
         */
        switchSearchStatus() {
            this.searchFormConfig.searchContenerShow = !this.searchFormConfig
                .searchContenerShow
        },
        /**
         * 刷新表格数据
         */
        refreshTableData() {
            // 将当前表格数据设置为空
            this.baseTableConfig.tableData = []
            this.queryTableData(this.queryTableParams)
        },
        /**
         * 设置表格显示隐藏列(打开弹框)
         */
        switchTableColumn() {
            let dialogParams = {
                title: '显示/隐藏',
                width: 'auto',
                show: true,
                key: 'tableColumn'
            }
            // 设置参与表格列控制的属性（最后的数组为不参与隐藏显示设置的列）
            this.tableColumnTransferConfig.data = assemblyDataByTableColumn(
                this.baseTableConfig.tableHeader,
                'label',
                ['选择', '操作']
            )
            this.handelOpenDialog(dialogParams)
        },
        /**
         * 设置表格显示隐藏列(弹框确认)
         */
        switchTableColumnButtonClick() {
            let newData = this.$refs.baseTransfer.backCheckedData()
            if (newData && newData.length > 0) {
                this.baseTableConfig.tableHeader.forEach(ele => {
                    ele.visible = !newData.includes(ele.label)
                })
            } else {
                this.baseTableConfig.tableHeader.forEach(ele => {
                    ele.visible = true
                })
            }
            this.handelCloseDialog()
        },
        /**
         * 设置(新增、修改)表单的表单项
         */
        async setFormsItems() {
            // 重新设置新增、修改 表单的部门树数据配置
            let dataSourceSelectData = setSelectFormart(
                this.dataSourceList,
                'datasourceName',
                'datasourceId'
            )
            let moduleSelectData = setSelectFormart(
                this.moduleList,
                'name',
                'id'
            )
            this.searchFormConfig.formItems = setFormItemProp(
                this.searchFormConfig.formItems,
                'datasourceId',
                'options',
                dataSourceSelectData
            )
            this.addFormConfig.formItems = setFormItemProp(
                this.addFormConfig.formItems,
                'datasourceId',
                'options',
                dataSourceSelectData
            )
            this.addFormConfig.formItems = setFormItemProp(
                this.addFormConfig.formItems,
                'moduleId',
                'options',
                moduleSelectData
            )
            this.addFormConfig.formItems = setFormItemProp(
                this.addFormConfig.formItems,
                'tableType',
                'options',
                this.tableTypeList
            )
        },
        /**
         * 新增表格数据(打开弹框)
         */
        addTableData() {
            // 打开新增弹框
            let dialogParams = {
                title: '新增',
                width: '30%',
                show: true,
                key: 'addTableData'
            }
            this.handelOpenDialog(dialogParams)
            this.$nextTick(() => {
                this.initAddForm()
            })
        },
        /**
         * 表字段配置(打开弹框)
         */
        columnTableData(row) {
            this.curRowData = row
            if (row.columns.length > 0) {
                this.configColumnDataTableConfig.tableData = row.columns
            } else {
                if (row.tableType == 0) {
                    let arr = [
                        {
                            columnName: 'id',
                            remarks: '主键',
                            columnType: 'int',
                            columnSize: 11,
                            decimalDigits: 0,
                            isKey: true,
                            isNull: false
                        }
                    ]
                    this.configColumnDataTableConfig.tableData = arr.concat(
                        this.defaultColumnList
                    )
                    this.configColumnDataTableConfig.tableData.forEach(v => {
                        v.tableId = row.id
                        v.tableName = row.tableName
                    })
                } else {
                    let arr = [
                        {
                            columnName: 'id',
                            remarks: '主键',
                            columnType: 'int',
                            columnSize: 11,
                            decimalDigits: 0,
                            isKey: true,
                            isNull: false
                        },
                        {
                            columnName: 'parent_id',
                            remarks: '父节点ID',
                            columnType: 'int',
                            columnSize: 11,
                            decimalDigits: 0,
                            isKey: false,
                            isNull: false
                        },
                        {
                            columnName: 'ancestors',
                            remarks: '祖级关系',
                            columnType: 'int',
                            columnSize: 11,
                            decimalDigits: 0,
                            isKey: false,
                            isNull: false
                        }
                    ]
                    this.configColumnDataTableConfig.tableData = arr.concat(
                        this.defaultColumnList
                    )
                    this.configColumnDataTableConfig.tableData.forEach(v => {
                        v.tableId = row.id
                        v.tableName = row.tableName
                    })
                }
            }

            // 打开新增弹框
            let dialogParams = {
                title: '表字段',
                width: '70%',
                show: true,
                key: 'configColumnData'
            }
            this.handelOpenDialog(dialogParams)
        },

        /**
         * 表索引配置(打开弹框)
         */
        indexTableData(row) {
            this.curRowData = row
            if (row.indexs.length > 0) {
                row.indexs.forEach(v => {
                    v.indexCols = v.indexColumns.split(',')
                })
                this.configIndexDataTableConfig.tableData = row.indexs
            } else {
                let arr = [
                    {
                        indexName: '',
                        indexType: '',
                        tableId: row.id,
                        indexCols: [],
                        operFalg: this.curRowData.status === '1' ? '2' : '',
                        status: '0'
                    }
                ]
                this.configIndexDataTableConfig.tableData = arr
            }

            // 打开表索引弹框
            let dialogParams = {
                title: '表索引',
                width: '70%',
                show: true,
                key: 'configIndexData'
            }
            this.handelOpenDialog(dialogParams)
        },
        /**
         * 创建表确认提交(弹框确认)
         */
        addFormButtonClick() {
            this.$refs['addForm'].submitForm(async res => {
                if (res) {
                    let assRes = await createTable(res)
                    if (assRes && assRes.code === 0) {
                        this.$message.closeAll()
                        this.$message.success({ message: '新增成功！' })
                    } else {
                        this.$message.closeAll()
                        this.$message.error({ message: '新增失败！' })
                    }
                    this.handelCloseDialog()
                    // 查询数据
                    this.refreshTableData()
                    this.initAddForm()
                } else {
                    this.initAddForm()
                }
            })
        },
        /**
         * 创建字段确认提交(弹框确认)
         */
        async configColumnDataFormButtonClick() {
            this.configColumnDataTableConfig.tableData.forEach((ele, index) => {
                ele.sort = index
            })
            let checkList = this.configColumnDataTableConfig.tableData.filter(
                ele => {
                    return ele.columnName === '' || ele.remarks === ''
                }
            )
            if (checkList.length > 0) {
                this.$message.success({
                    message: '请完善数据中的列名称或列描述'
                })
                return
            }
            let res = this.configColumnDataTableConfig.tableData
            let assRes = await createColumn(res)
            if (assRes && assRes.code === 0) {
                this.$message.closeAll()
                this.$message.success({ message: '保存成功！' })
            } else {
                this.$message.closeAll()
                this.$message.error({ message: '保存失败！' })
            }
            this.handelCloseDialog()
        },
        /**
         * 创建索引确认提交(弹框确认)
         */
        async configIndexDataFormButtonClick() {
            debugger
            this.configIndexDataTableConfig.tableData.forEach(v => {
                v.indexColumns = v.indexCols.join(',')
            })
            let res = this.configIndexDataTableConfig.tableData.filter(v => {
                return v.indexType && v.indexColumns
            })
            if (res.length == 0) {
                this.$message.error({ message: '请填写索引！' })
                return false
            }
            let assRes = await createIndex(res)
            if (assRes && assRes.code === 0) {
                this.$message.closeAll()
                this.$message.success({ message: '保存成功！' })
            } else {
                this.$message.closeAll()
                this.$message.error({ message: '保存失败！' })
            }
            this.handelCloseDialog()
        },
        /**
         * 设置不可编辑
         * @param {*} row
         */
        setDisabled(row) {
            var show = true
            if (row.columnName === 'create_user') {
                show = false
            } else if (row.columnName === 'create_time') {
                show = false
            } else if (row.columnName === 'update_user') {
                show = false
            } else if (row.columnName === 'update_time') {
                show = false
            } else if (row.operFalg === '1') {
                show = false
            } else if (row.operFalg === '2' && row.status === '1') {
                show = false
            }

            return show
        },
        /**
         * 添加行数据
         */
        addRowData(index, row) {
            if (row.columnName === '' || row.remarks === '') {
                this.$message.error({ message: '列名称或列描述不能为空' })
                return false
            }
            let newElement = {
                tableId: this.curRowData.id,
                tableName: this.curRowData.tableName,
                columnName: '',
                remarks: '',
                columnType: 'varchar',
                columnSize: 255,
                decimalDigits: 0,
                isKey: false,
                isNull: true
            }
            if (this.curRowData.status === '1') {
                newElement.operFalg = '2'
            }
            this.configColumnDataTableConfig.tableData.splice(
                index + 1,
                0,
                newElement
            )
        },

        /**
         * 删除字段行数据
         */
        deleteRowData(index, row) {
            if (this.curRowData.status === '0') {
                this.configDataModelTableConfig.tableData.splice(index, 1)
            } else {
                row.operFalg = '4'
                row.status = '0'
                this.$set(row, 'delViews', true)
            }
        },

        /**
         * 添加行数据
         */
        addIndexData(index, row) {
            if (row.indexName === '') {
                this.$message.error({ message: '请输入字段名称' })
                return false
            }
            if (row.indexType === '') {
                this.$message.error({ message: '请选择类型' })
                return false
            }
            if (row.indexColumns === '') {
                this.$message.error({ message: '请选择关联字段' })
                return false
            }
            let newElement = {
                indexName: '',
                indexType: '',
                tableId: row.id,
                indexCols: [],
                operFalg: this.curRowData.status === '1' ? '2' : '',
                status: '0'
            }
            this.configColumnDataTableConfig.tableData.splice(
                index + 1,
                0,
                newElement
            )
        },
        /**
         * 删除索引行数据
         */
        deleteIndexData(index, row) {
            if (this.curRowData.status === '0') {
                this.configColumnDataTableConfig.tableData.splice(index, 1)
            } else {
                row.operFalg = '4'
                row.status = '0'
                this.$set(row, 'delViews', true)
            }
        },
        /**
         * 初始化新增表单
         */
        initAddForm() {
            this.addFormConfig.formSubmit = {
                tableName: '',
                tableComment: '',
                datasourceId: '',
                datasourceType: '',
                moduleId: '',
                tableType: '0'
            }
            this.$refs.addForm.resetForm()
        },

        /**
         * 应用数据
         */
        syncTableData(row) {
            let params = [row.id]
            this.$confirm('此操作将应用模型数据到数据库, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await syncDataModel(params)
                    if (res && res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: '应用成功!'
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '应用失败!'
                        })
                    }
                    // 查询数据
                    this.refreshTableData()
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        /**
         * 删除表格数据
         */
        deleteTableData(row) {
            let params = [row.id]
            this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    let res = await deleteTable(params)
                    if (res && res.code == 0) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败!'
                        })
                    }
                    // 查询数据
                    this.refreshTableData()
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },

        /**
         * 弹框相关
         */
        /**
         * 打开弹框
         * @param {*} params
         */
        handelOpenDialog(params) {
            this.dialogConfig = params
        },
        /**
         * 初始化弹框
         */
        handelInitDialog() {
            this.dialogConfig = {
                title: '',
                show: false,
                width: '',
                key: ''
            }
        },
        /**
         * 关闭弹框
         */
        handelCloseDialog() {
            this.handelInitDialog()
        },
        /**
         * 弹框确定
         */
        handelCofimeDialog() {
            // 表格列筛选的弹框
            if (this.dialogConfig.key === 'tableColumn') {
                this.switchTableColumnButtonClick()
            } else if (this.dialogConfig.key === 'addTableData') {
                this.addFormButtonClick()
            } else if (this.dialogConfig.key === 'configColumnData') {
                this.configColumnDataFormButtonClick()
            } else if (this.dialogConfig.key === 'configIndexData') {
                this.configIndexDataFormButtonClick()
            }
        },

        handerOnSelectChange(params) {
            if (params.prop === 'datasourceId') {
                this.addFormConfig.formSubmit.datasourceType = Vue.filter(
                    'getAttrName'
                )(
                    this.addFormConfig.formSubmit.datasourceId,
                    this.dataSourceList,
                    'datasourceId',
                    'datasourceType'
                )
            }
        },

        indexColumnsSelectChange(row) {
            row.indexName = row.indexType + '_' + row.indexCols.join('_')
        },
        indexTypeSelectChange(index, row) {
            row.indexName = row.indexType + '_' + row.indexCols.join('_')
        },

        columnNameInputBlur(row) {
            var reg = /^[a-zA-Z_]([a-zA-Z0-9_]+)?$/
            if (!reg.test(row.columnName)) {
                row.columnName = ''
                this.$message.error('列名称支持大小写字母、数字或者下划线！')
                return false
            }
        },
        remarksInputBlur(row) {
            var reg1 = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/
            if (!reg1.test(row.remarks)) {
                row.remarks = ''
                this.$message.error('列描述支持汉字、数字、字母、下划线！')
                return false
            }
        },
        columnTypeSelectChange(row) {
            if (row.columnType === 'date' || row.columnType === 'datetime') {
                row.columnSize = 0
                row.decimalDigits = 0
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.dialog-content {
    @include box_flex(
        $width: 100%,
        $height: auto,
        $direction: column,
        $justify: flex-start,
        $align: center
    );
}
.config—model-dialog {
    @include box_flex(
        $width: 100%,
        $height: 60vh,
        $direction: column,
        $justify: flex-start
    );
}
.from-contener {
    @include box_flex(
        $width: 100%,
        $height: 6vh,
        $direction: column,
        $justify: flex-start,
        $align: center
    );
}
.table-contener {
    @include box_flex(
        $width: 100%,
        $height: 90vh,
        $direction: column,
        $justify: flex-start,
        $align: flex-start
    );
}
</style>
